{% extends "base_generic.html" %}

{% block content %}
  <div class="row mb-4">
    <div class="col-md-4">
      {% if book.cover_image %}
        <img src="{{ book.cover_image.url }}" alt="{{ book.title }}" class="img-fluid rounded">
      {% else %}
        <div class="bg-light d-flex align-items-center justify-content-center rounded" style="height: 300px;">
          <i class="fa fa-book fa-5x text-secondary"></i>
        </div>
      {% endif %}
    </div>
    
    <div class="col-md-8">
      <h1 class="mb-3">{{ book.title }}</h1>
      
      <div class="d-flex align-items-center mb-3">
        <div class="me-3">
          {% if book.average_rating > 0 %}
            <div class="rating">
              {% for i in "12345" %}
                {% if forloop.counter <= book.average_rating|floatformat:"0" %}
                  <i class="fa fa-star text-warning"></i>
                {% elif forloop.counter <= book.average_rating|add:"0.5"|floatformat:"0" %}
                  <i class="fa fa-star-half-alt text-warning"></i>
                {% else %}
                  <i class="fa fa-star text-muted"></i>
                {% endif %}
              {% endfor %}
              <span class="ms-2">({{ book.average_rating|floatformat:"1" }})</span>
            </div>
          {% else %}
            <span class="text-muted">尚无评分</span>
          {% endif %}
        </div>
        
        <!-- 点赞和收藏按钮 -->
        {% if user.is_authenticated %}
          <div class="action-buttons">
            <button id="like-button" class="btn btn-sm {% if is_liked %}btn-danger{% else %}btn-outline-danger{% endif %} me-2">
              <i class="fa fa-thumbs-up"></i> 
              <span id="likes-count">{{ book.likes }}</span>
            </button>
            
            <button id="favorite-button" class="btn btn-sm {% if is_favorite %}btn-warning{% else %}btn-outline-warning{% endif %}">
              <i class="fa {% if is_favorite %}fa-heart{% else %}fa-heart{% endif %}"></i> 
              {% if is_favorite %}已收藏{% else %}收藏{% endif %}
            </button>
          </div>
        {% endif %}
      </div>
      
      <p><strong>作者:</strong> <a href="{% url 'author-detail' book.author.pk %}">{{ book.author }}</a></p>
      <p><strong>摘要:</strong> {{ book.summary }}</p>
      <p><strong>ISBN:</strong> {{ book.isbn }}</p>
      <p><strong>类别:</strong> {% for genre in book.genre.all %} {{ genre }}{% if not forloop.last %}, {% endif %}{% endfor %}</p>
      
      {% if book.price > 0 %}
        <div class="price-box mt-3">
          <h3 class="text-danger">¥{{ book.price }}</h3>
          <button class="btn btn-success"><i class="fa fa-shopping-cart"></i> 加入购物车</button>
        </div>
      {% endif %}
    </div>
  </div>

  <!-- 图书可借阅副本信息 -->
  <div class="card mb-4">
    <div class="card-header bg-light">
      <h3>馆藏信息</h3>
    </div>
    <div class="card-body">
      {% for copy in book.bookinstance_set.all %}
        <div class="p-3 mb-3 border-bottom">
          <p class="badge {% if copy.status == 'a' %}bg-success{% elif copy.status == 'm' %}bg-danger{% else %}bg-warning{% endif %}">
            {{ copy.get_status_display }}
          </p>
          {% if copy.status != 'a' %}<p><strong>预计归还日期:</strong> {{copy.due_back}}</p>{% endif %}
          <p><strong>印刷信息:</strong> {{copy.imprint}}</p>
          <p class="text-muted"><strong>编号:</strong> {{copy.id}}</p>
        </div>
      {% empty %}
        <p class="text-muted">暂无馆藏信息</p>
      {% endfor %}
    </div>
  </div>

  <!-- 评论区 -->
  <div class="card mb-4">
    <div class="card-header bg-light">
      <h3>书评 ({{ reviews.count }})</h3>
    </div>
    <div class="card-body">
      {% if user.is_authenticated %}
        <div class="mb-4">
          <h4>{% if user_reviewed %}编辑您的评论{% else %}发表评论{% endif %}</h4>
          <form method="post" action="{% url 'add-review' book.pk %}">
            {% csrf_token %}
            <div class="mb-3">
              <label for="{{ form.rating.id_for_label }}" class="form-label">评分</label>
              {{ form.rating }}
            </div>
            <div class="mb-3">
              <label for="{{ form.comment.id_for_label }}" class="form-label">评论内容</label>
              {{ form.comment }}
              {% if user_reviewed %}
                <script>
                  document.getElementById("{{ form.rating.id_for_label }}").value = "{{ user_review.rating }}";
                  document.getElementById("{{ form.comment.id_for_label }}").value = "{{ user_review.comment }}";
                </script>
              {% endif %}
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
          </form>
        </div>
      {% else %}
        <div class="alert alert-info">
          请<a href="{% url 'login' %}?next={{ request.path }}">登录</a>后发表评论
        </div>
      {% endif %}

      <!-- 评论列表 -->
      {% for review in reviews %}
        <div class="border-top pt-3 pb-3">
          <div class="d-flex justify-content-between align-items-center mb-2">
            <div>
              <strong>{{ review.user.username }}</strong>
              <div class="rating">
                {% for i in "12345" %}
                  {% if forloop.counter <= review.rating %}
                    <i class="fa fa-star text-warning"></i>
                  {% else %}
                    <i class="fa fa-star text-muted"></i>
                  {% endif %}
                {% endfor %}
              </div>
            </div>
            <small class="text-muted">{{ review.created_date|date:"Y-m-d H:i" }}</small>
          </div>
          <p>{{ review.comment }}</p>
        </div>
      {% empty %}
        <p class="text-muted">暂无评论</p>
      {% endfor %}
    </div>
  </div>
{% endblock %}

{% block extra_js %}
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 点赞功能
    const likeButton = document.getElementById('like-button');
    if (likeButton) {
      likeButton.addEventListener('click', function() {
        fetch('{% url "toggle-like" book.pk %}')
          .then(response => response.json())
          .then(data => {
            document.getElementById('likes-count').textContent = data.likes_count;
            if (data.is_liked) {
              likeButton.classList.remove('btn-outline-danger');
              likeButton.classList.add('btn-danger');
            } else {
              likeButton.classList.remove('btn-danger');
              likeButton.classList.add('btn-outline-danger');
            }
          });
      });
    }
    
    // 收藏功能
    const favoriteButton = document.getElementById('favorite-button');
    if (favoriteButton) {
      favoriteButton.addEventListener('click', function() {
        fetch('{% url "toggle-favorite" book.pk %}')
          .then(response => response.json())
          .then(data => {
            if (data.is_favorite) {
              favoriteButton.classList.remove('btn-outline-warning');
              favoriteButton.classList.add('btn-warning');
              favoriteButton.innerHTML = '<i class="fa fa-heart"></i> 已收藏';
            } else {
              favoriteButton.classList.remove('btn-warning');
              favoriteButton.classList.add('btn-outline-warning');
              favoriteButton.innerHTML = '<i class="fa fa-heart"></i> 收藏';
            }
          });
      });
    }
  });
</script>
{% endblock %}
